<template>
  <div class="page J-card">
    <div class="card-list" v-if='!isData'>
      <get-data :scroller-data="getCardList" :config="config" :page="4"  ref="scroller" :type="type">
        <div class="item" v-for="item in getCardList.data">
          <router-link :to="'/card/show?id='+ item.card_id" class="list card-shadow" :style="{
          'background': item.background_pic_path?'url('+URL+item.background_pic_path+') no-repeat':'-webkit-linear-gradient(60deg, #fafafa 25%,' + item.color +')'}">
            <div class="weui-flex pl">
                <div class="card-avatar">
                  <img :src="item.logo_path?URL+item.logo_path:avatar" />
                </div>
                <div class="weui-flex__item">
                  <div class="cell"><span class="font-16">{{item.brand_name}}</span> <span class="card-name fr" v-if="item.supply_level == 1">{{item.level_title}}</span></div>
                  <div class="cell mt-5"><span class="btn-jf t">积分: {{item.bonus}} </span>
                    <span class="btn-yuer t" v-if="item.supply_balance == 1">余额: {{item.balance}} 元</span></div>
                  <div class="cell card-tis" v-if="item.supply_level == 1">再获取 {{item.next_level_conditions_margin}} 积分即可升级为金卡</div>
                </div>
            </div>
          </router-link>
        </div>
      </get-data>
    </div>
    <no-data :title="title" v-else='isData'></no-data>
  </div>
</template>
<script>
  const config = require('~src/config')
  import { mapGetters } from 'vuex'
  import GetData from '~components/mixins/getData.vue'
  import NoData from '~components/mixins/no-data.vue'
  const util = require('~src/lib/util')
  export default {
    name: 'card',
    data () {
      return {
        URL: config._API_,
        avatar: config._URL_ + '/static/images/avatar.png',
        isData: false,
        type: 'getCardList',
        title: '暂时找不到会员卡',
        iscroller: true,
        config:{
          id:'26',
          page:'1'
        }
      }
    },
    computed: {
      ...mapGetters({
        getCardList: 'getCardList'
      })
    },
    components: {
      NoData,
      GetData
    },
    mounted () {
      var _this = this
      if (_this.getCardList.data.length == 0 || _this.getCardList.code == '404') {
        _this.$refs.scroller.getData('26')
      }
      if (_this.getCardList.code == '404') {
        this.isData = true
      }
    }
  }
</script>
<style lang="scss">
  .J-card{
    .card-list{
      height:100%;
    }
    .scroller{
      height:100%;
      position: relative;
    }
    .card-info{
      padding-left:10px;
    }
    .card-name{
      font-size:14px;
    }
    .item{
      margin:15px;
    }
    .list{
      display: block;
      padding:15px;
      height:150px;
      margin-bottom:18px;
      -weikit-border-radius:10px;
      border-radius:10px;
      color:#333;
      .card-tis{
        color:#868686;
        font-size:12px;
        margin-top:15px;
      }
      .cell{
        span.t{
          display: inline-block;
          padding:3px 5px 2px;
          font-size:12px;
        }
        .btn-jf{
          background-color:#00CC00;
          color:#fff;
          border-radius: 3px;
          margin-right:10px;
        }
      }
    }
  }
  .card-shadow{
    background: #d2d2d2;
    box-shadow: 0px 2px 2px #cccaca;
  }
  .card-avatar{
    width:40px;
    height:40px;
    margin-right: 20px;
    -webkit-border-radius:50%;
    border-radius:50%;
    img{
      width:40px;
      height:40px;
      -webkit-border-radius:50%;
      border-radius:50%;
    }
  }
</style>
